<template>
  <scroll class="intedata-scroll" ref="intedataScroll" :data="data">
    <div class="intedata-container">
      <template v-for="(views, k) of data">
        <slider v-if="views.view_type === 'gallery'" class="gallery">
          <div v-for="(view, index) of views.body.items" :key="index">
            <a :style="getStyle(view)">
              <img :src="addHttps(view.img_url)" class="img" />
            </a>
          </div>
        </slider>

        <cells-auto-fill
          v-else-if="views.view_type === 'cells_auto_fill'"
          :views="views"
        ></cells-auto-fill>

        <divider-line
          v-else-if="views.view_type === 'divider_line'"
          :data="views"
        ></divider-line>

        <div
          v-else-if="views.view_type === 'list_three_type4'"
          class="list_three_type4"
          :style="getStyle(views.body)"
        >
          <div
            class="view"
            v-for="(view, index) of views.body.items"
            :key="index"
          >
            <div class="img">
              <img v-lazy="addHttps(view.img_url)" class="big" />
              <div class="tag2">
                <img
                  v-for="image of view.product_tag_array"
                  v-lazy="addHttps(image)"
                />
              </div>
            </div>
            <div class="info">
              <div class="text-wrap">
                <div class="name no-wrap">{{ view.product_name }}</div>
                <div class="brief no-wrap">{{ view.product_brief }}</div>
                <div class="price">
                  <span v-html.trim="view.product_price"></span>
                  <span
                    class="price old"
                    v-if="
                      view.product_org_price &&
                      view.product_org_price != view.product_price
                    "
                  >
                    <s v-html.trim="view.product_org_price"></s>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import intedata from 'assets/json/intellgent.json'
import Scroll from 'common/scroll/scroll'
import Slider from 'common/slider/slider'

import DividerLine from 'common/divider-line/divider-line'
import { homeMixin } from 'assets/js/mixin'
import CellsAutoFill from 'common/cells-auto-fill/cells-auto-fill'

export default {
  mixins: [homeMixin],
  data() {
    return {
      data: intedata.data.data.sections
    }
  },

  components: {
    Scroll,
    Slider,
    DividerLine,
    CellsAutoFill
  }
}

</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.intedata-scroll {
  .intedata-container {
    width: 100%;
    font-size: 0;

    .list_three_type4 {
      padding: 0 0.16rem;
      overflow: hidden;
      text-align: left;

      .view {
        margin-left: 0.12rem;
        width: 2.21rem;
        border-radius: 0.06rem;
        overflow: hidden;
        float: left;

        .img {
          position: relative;
          overflow: hidden;
          width: 2.21rem;
          height: 2.21rem;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }

          .tag2 {
            position: absolute;
            bottom: 0;
            right: 0;

            img {
              display: inline-block;
              width: 1rem;
              height: auto;
            }
          }
        }

        .info {
          height: auto;
          padding: 0.2rem 0.1rem;
          text-align: center;
          overflow: hidden;

          .text-wrap {
            padding-top: 0;
            padding-right: 0;
            height: auto;

            .name {
              font-size: 0.24rem;
              padding: 0 0.12rem;
              font-weight: bolder;
              color: #3c3c3c;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .brief {
              font-size: 0.2rem;
              line-height: 1.6em;
              color: #3c3c3c;
              height: 1.5em;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .price {
              font-size: 0.28rem;
              text-align: center;
              margin-top: 0.3em;
              margin-bottom: 0;
              color: #ff4a48;
              font-weight: 700;
              line-height: 1em;
              height: 1.2em;
              white-space: nowrap;
              position: relative;
              display: inline-block;
              padding-left: 0.5em;

              .old {
                display: inline-block;
                margin: 0 0.1rem;
                font-size: 0.76em;
                color: rgba(0, 0, 0, 0.54);
              }
            }

            .price:before {
              content: '\A5';
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.76em;
              text-decoration: none;
            }
          }
        }
      }

      .view:first-child {
        margin-left: 0;
      }
    }
  }
}
</style>